<template>
  <!-- 头部 -->
  <div class="header">
    <!-- 头部菜单 -->
    <ul class="header_menu">
      <li
        :class="{ active: item.isActive }"
        v-for="(item, index) in headerNav"
        :key="index"
      >
        <a href="javascript:;" @click="() => handleClickToSys(item)">{{
          item.name
        }}</a>
      </li>
    </ul>
    <!-- 角色切换 -->
    <div class="role_card">
      <div class="btn" @click="dialogVisible = !dialogVisible">
        <i class="el-icon-s-help"></i>
        角色切换
      </div>
      <div class="role">
        <i class="el-icon-s-custom"></i>
        <el-tooltip
          :content="currentRole.name"
          placement="right"
          effect="light"
        >
          <p class="text">
            {{ currentRole.name }}
          </p>
        </el-tooltip>
      </div>
    </div>
    <RoleDialog :dialogVisible.sync="dialogVisible" />
  </div>
</template>

<script>
import { mapActions } from "vuex";
import local from "@/utils/local";
import { fetchAllMenus, fetchRole } from "@/api/changeRole";
import RoleDialog from "../components/RoleDialog";
import { formatTree } from "@/utils/util";
import _ from "lodash";
export default {
  components: {
    RoleDialog,
  },
  data() {
    return {
      activepath: "",
      dialogVisible: false,
      headerNav: [],
      currentRole: { name: void 0 },
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  created() {
    this.fetch();
  },
  methods: {
    ...mapActions(["fetchMenu"]),
    async fetch() {
      const { data } = await fetchAllMenus({
        sysCode: "131452021",
        uasLoginer: local.get("uasLoginer"),
      });
      const { parent: parentRoute } = await formatTree(data);
      await fetchRole({
        sysCode: "131452021",
        uasLoginer: local.get("uasLoginer"),
      }).then((response) => {
        if (response && response.code === 200) {
          const arr = [];
          response.data["角色列表"].map((item) => {
            if (item.roleCode === response.data["当前角色"]) {
              response.data["当前角色"] = item;
              this.currentRole = response.data["当前角色"];
              this.fetchMenu({
                roleCode: item.roleCode,
                sysCode: "131452024",
                uasLoginer: local.get("uasLoginer"),
              });
            }
            parentRoute.map((unit) => {
              if (unit.sysCode === "131452021") {
                unit.isActive = true;
              }
              if (unit.sysCode === item.sysCode) {
                arr.push(JSON.stringify(unit));
              }
            });
          });
          parentRoute.map((unit) => {
            if (
              response.data["当前角色"] &&
              response.data["当前角色"].isQxcd &&
              unit.sysCode === "131452027"
            ) {
              arr.push(JSON.stringify(unit));
            }
            if (
              response.data["当前角色"] &&
              response.data["当前角色"].isSy &&
              unit.sysCode === "131452028"
            ) {
              arr.push(JSON.stringify(unit));
            }
          });
          const copyArr = _.map([...new Set(arr)], (a) => JSON.parse(a));
          this.$set(
            this.$data,
            "headerNav",
            copyArr.sort((a, b) => a.orderNumber - b.orderNumber)
          );
        } else {
          this.$message({
            type: "info",
            message: response.msg,
          });
        }
      });
    },
    handleClickToSys({ url }) {
      window.location.href = `${url}`;
      // window.location.href = `${url}?sysCode=131452021`;
    },
  },
};
</script>

<style lang="less" scoped>
.role_card {
  z-index: 999;
  width: 200px;
  position: fixed;
  height: 55px;
  bottom: 0;
  left: 0;
  right: 0;
  background: #a4d2ff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  i {
    font-size: 14px;
  }
  .btn {
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    padding: 0 5px;
    border-right: 2px solid #666;
    margin-right: 5px;
  }
  .role {
    text-align: center;
    font-size: 12px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    .text {
      margin: 0 0 0 5px;
      white-space: nowrap;
      width: 80px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.header {
  flex: 40px 0 0;
  background-color: #00a8ff;
  display: flex;
  flex-direction: column;
  .header_top {
    flex: 130px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left_title {
      font-size: 30px;
      font-weight: 700;
      color: #fff;
      margin-left: 100px;
    }
    .header_right {
      color: #fff;
      margin-right: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-width: 500px;
      height: 100px;
      .user_info {
        display: flex;
        align-items: center;
      }
      .user_tools {
        display: flex;
        .header_right_icon {
          cursor: pointer;
          margin-left: 20px;
          text-align: center;
          i {
            font-size: 20px;
            font-weight: bold;
          }
          span {
            display: flex;
          }
        }
      }
    }
  }
  .header_menu {
    padding-left: 100px;
    display: flex;
    flex: 1;
    font-weight: bold;
    background-color: #0063c7;
    margin: 0;
    li {
      padding: 0 20px;
      line-height: 40px;
      height: 40px;
      &:hover {
        background-color: #5ab5ff;
      }
      &.active {
        background-color: #5ab5ff;
      }
      a {
        font-size: 14px;
        text-decoration: none;
        color: #fff;
      }
    }
  }
}
</style>